<template>
    <div class="bgbox">
        <router-view/>
        <ul class="banxin bg">
            <li v-for="(item) in planlist" :key="item.id" class="val" @click="planFn(item.info,item.name)">
                <h2>{{item.name}}</h2>
                <span>创建日期: {{item.time}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    created(){
        // 安装步进器
    },
    data () {
        return {

            planlist : [
                {
                    name : '减肥计划',
                    info : '/plan/planinfo?name=减肥计划',
                    id : '0',
                    time : '2023.03.22'
                },
                {
                    name : '待定计划',
                    info : `/plan/nothing?name=待定计划`,
                    id : '1',
                    time : '2000.00.00'
                },
                {
                    name : '待定计划',
                    info : '/plan/nothing?name=待定计划',
                    id : '2',
                    time : '2000.00.00'
                },
                {
                    name : '待定计划',
                    info : '/plan/nothing?name=待定计划',
                    id : '3',
                    time : '2000.00.00'
                },
                {
                    name : '待定计划',
                    info : '/plan/nothing?name=待定计划',
                    id : '4',
                    time : '2000.00.00'
                },
                {
                    name : '待定计划',
                    info : '/plan/nothing?name=待定计划',
                    id : '5',
                    time : '2000.00.00'
                },
            ],

 
        }
    },
    methods:{
        planFn(e,i){
            
            if( this.$route.query.name == i){
                this.$router.push('/plan')
            }else{
                this.$router.push(e)
            }
        }
    }
}
</script>
 
<style lang="less" scoped>
.bgbox {
    background-color: antiquewhite;
}
    .bg {
        background-color: white;
        margin: 0 auto;
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        text-decoration: none;
        list-style: none;
        .val {
            width: 48%;
            font-family: 'myFont';
            text-align: center;
            height: 240px;
            margin: 10px auto;
            background-color: rgb(82, 141, 171);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            h2 {
                font-size: 25px;
            }
            span {
                padding: 18px;
            }
            &:hover {
                text-decoration: underline;
            }
        }
        
    }
</style>